<template>
    <div class="app-container">
      <el-table :key="tableKey" v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%;"   :row-class-name="tableRowClassName">
        <el-table-column label="pay_id" prop="pay_id" align="center">
          <template slot-scope="{row}">
            <span>{{ row.pay_id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="总额" prop="total_money" align="center">
          <template slot-scope="{row}">
            <span>{{ row.total_money }}</span>
          </template>
        </el-table-column>
        <el-table-column label="分期金额" prop="money" align="center">
          <template slot-scope="{row}">
            <span>{{ row.money }}</span>
          </template>
        </el-table-column>
        <el-table-column label="利息" prop="money_rate" align="center">
          <template slot-scope="{row}">
            <span>{{ row.money_rate }}</span>
          </template>
        </el-table-column>
        <el-table-column label="还款日期" prop="time_date" align="center">
          <template slot-scope="{row}">
            <span>{{ row.time_date }}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否还款" prop="is_paid" align="center">
          <template slot-scope="{row}">
            <span v-if="row.is_paid==1">已还款</span>
             <span v-if="row.is_paid==0">未还款</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
          <template slot-scope="{row,$index}">
            <el-button size="mini" type="primary" @click="detail(row.order_id,row.pay_id)" v-if="row.is_overdue==1">
              催收
            </el-button>
            <el-button size="mini" type="danger"  v-if="row.is_overdue==0">
                无操作
            </el-button>
          </template>
        </el-table-column>
 </el-table>
    </div>
</template>

<script>
  import {
    getOrderPaymentList
  } from '@/api/collection'
  import {
    formatDate
  } from '@/utils/formatDate.js'
  import waves from '@/directive/waves' // waves directive
  import {
    parseTime
  } from '@/utils'
  export default {
    name: 'orderPaymentTable',

    directives: {
      waves
    },
    filters: {
      formatDate(time) {
        time = time * 1000
        let date = new Date(time)

        return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
      }
    },
    data() {
      return {
           tableKey: 0,
            list: [],
            listLoading : true
        }
        },
     created() {
           this.getList()
     },
     methods:{
       getList(){
          let order_id = this.$route.params.order_id
           getOrderPaymentList(order_id).then(resp=>{
             this.list=resp.data
             setTimeout(() => {
               this.listLoading = false
             }, 1.0 * 1000)
           })
       },
       detail(order_id,pay_id){
 this.$router.push('/collection/detail/' + order_id + "/" +pay_id)
       },
       tableRowClassName({row, rowIndex}) {

               if (row.is_overdue===1) {
                 return 'overdue-row';

               }
                return '';
             }

     }
    }
</script>

<style>


    .el-table .overdue-row {
      background: #F44336;
    }
</style>
